<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes" />
    <meta name=apple-mobile-web-app-capable content=yes />
    <meta name=apple-touch-fullscreen content=yes />
    <meta name=format-detection content="telephone=no,email=no" />
    <meta name="full-screen" content="yes">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta name="renderer" content="webkit">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <meta name="x5-fullscreen" content="true">
</head>

<body>
    <div id="root">
      <style>
        .page-loading{
          height: 100%;
          width: 100%;
          position: fixed;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .loading-view{
          height: 100px;
          width: 100px;
          perspective: 100vw;
        }
        .loading-thing {
          height: 50px;
          width: 50px;
          background-color: #E87722;
          position: absolute;
          box-sizing: border-box;
          top: 0;
          left: 0;
        }
        .loading-thing:nth-of-type(1) {
          animation: bounce 0.5s ease-in-out infinite alternate, move 4s -1s infinite; }

        .loading-thing:nth-of-type(2) {
        animation: bounce 0.5s ease-in-out infinite alternate, move 4s -2s infinite; }

        .loading-thing:nth-of-type(3) {
        animation: bounce 0.5s ease-in-out infinite alternate, move 4s -3s infinite; }

        .loading-thing:nth-of-type(4) {
        animation: bounce 0.5s ease-in-out infinite alternate, move 4s -4s infinite; }

        @keyframes bounce {
          from {transform: scale(1);}
          to {transform: scale(0.8);}
        }

        @keyframes move {
          0% {
            top: 0;
            left: 0;
            background-color: #E87722;
          }
          25% {
            top: 0;
            left: 50%;
            background-color: #A4D65E;
          }
          50% {
            top: 50%;
            left: 50%;
            background-color: #69B3E7;
          }
          75% {
            top: 50%;
            left: 0;
            background-color: #FFC845;
          }
        }
      </style>
      <div class="page-loading">
        <div class="loading-view">
          <div class="loading-thing"></div>
          <div class="loading-thing"></div>
          <div class="loading-thing"></div>
          <div class="loading-thing"></div>
        </div>
      </div>
    </div>
</body>

</html>